<!DOCTYPE html>
<html lang="en">
<!-- 彗星 -->

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #222;
            overflow: hidden;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
            position: absolute;
            z-index: 1;
            width: 100%;
            opacity: .3;
            display: flex;
            flex-wrap: wrap;
        }

        .box img {
            /* flex: 1; */
            width: 100%;

        }

        #container {
            position: relative;
            z-index: 1;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="../../img/05.jpg" alt="">
    </div>

    <!-- 彗星 -->

    <!-- 可以弄一个容器 id取container, 如果没有容器则插到body下面 -->
    <!-- 这个 canvas不能有遮挡, 不然画不出来 -->
    <!-- 都是全屏 -->
    <div id="container"></div>
    <script src="./sketch.js"></script>
    <script src="./myconfig.js"></script>

</body>

</html>